<template>
  <div class="patient flex-y-start-stretch">
    <FirstHeader :title="'患者信息'" :file="'rescue'" :icon="'info-icon'"></FirstHeader>
    <div v-if="!data" class="flex-y-center f1">车辆暂无患者</div>
    <div class="detail f1 px-20" v-else>
      <div class="item foundation flex-x-between">
        <div class="flex-x-between f2">
          <div class="f1">
            <span class="label">姓名：</span>
            <span class="value">{{ data?.name }}</span>
          </div>
          <div class="f1">
            <span class="label">年龄：</span>
            <span class="value">{{ data?.age }}岁</span>
          </div>
        </div>
        <div class="flex-x-between f3">
          <div class="f2">
            <span class="label">性别：</span>
            <span class="value">{{ data?.gender == 1 ? "男" : "女" }}</span>
          </div>
          <div class="f3">
            <span class="label">联系方式：</span>
            <span class="value">{{ data?.mobile }}</span>
          </div>
        </div>
      </div>
      <div class="item foundation flex-x-between">
        <div class="f2">
          <span class="label">居住地址：</span>
          <span class="value">{{ data?.liveAddress }}</span>
        </div>
        <div class="f3">
          <span class="label">病情描述：</span>
          <span class="value">{{ data?.diseaseDesc }}</span>
        </div>
      </div>
      <div class="item foundation flex-x-between">
        <div class="f2">
          <span class="label">既往病史：</span>
          <span class="value">{{ data?.pastHistory }}</span>
        </div>
        <div class="flex-x-between f3">
          <div class="f2">
            <span class="label">过敏史：</span>
            <span class="value">{{ data?.allergyHistory }}</span>
          </div>
          <div class="f3">
            <span class="label">目前服用药物：</span>
            <span class="value">{{ data?.takeDrug }}</span>
          </div>
        </div>
      </div>
      <div class="item foundation flex-x-between">
        <div class="f2">
          <span class="label">急救时间：</span>
          <span class="value">{{ data?.aidTime }}</span>
        </div>
        <div class="f3">
          <span class="label">上车地点：</span>
          <span class="value">{{ data?.intoAddress }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import FirstHeader from "@/components/FirstHeader/index.vue";
defineProps({
  data: Object
});
</script>

<style lang="scss" scoped>
.patient {
  width: 69.375rem;
  height: 12.5rem;
  background: url("@/assets/images/rescue/info-bg.png") no-repeat;
  background-size: 100% 100%;
  .title {
    font-size: 1.375rem;
    color: #ffffff;
    font-weight: bold;
    display: flex;
    align-items: center;
    .icon {
      width: 1.5625rem;
      height: 1.5625rem;
      margin-right: 0.625rem;
    }
  }
  .detail {
    .item {
      font-size: 1.125rem;
      color: rgba(255, 255, 255, 0.9);
      margin: 0.625rem 0;
      line-height: 2rem;
      .label {
        display: inline-block;
        text-align: justify;
        text-align-last: justify;
      }
      .value {
      }
    }
    .foundation {
      .label {
        display: inline;
      }
    }
  }
}
.f2 {
  flex: 2;
}
.f3 {
  flex: 3;
}
</style>
